<template>
	<view class="content">
			
			<image class="logoImage" src="/static/image/login/loginlogo.png"></image>
			
			<view class="login-t">
				Hi，欢迎登录
			</view>
			<view>
			
			<view class="loginButtonStyleView" style="margin-top: 48upx;">
				<input class="inputView" type="text" v-model="mobile" placeholder="请输入账号" placeholder-class="inputpalceView" style="width: 100%" />
			</view>
			<view class="loginButtonStyleView">
				<input class="inputView" :password="true" placeholder-class="inputpalceView" type="text" v-model="pwd"
				 placeholder="请输入密码" />
			</view>
			<view class="loginButtonStyleView" v-if="isCaptcha">
				<input class="inputView" placeholder-class="inputpalceView" type="text" v-model="captcha" placeholder="输入验证码"
				 style="width: 100%" />
				<img class="codeimg" :src="captchaUrl" alt="" @click="getCodeImg" />
			</view>
				
	
			<view class="agreement">
			登录即代表您已同意
			<view @click="goAgreement()" class="hintArrow">《服务协议》</view>
			及
			<view @click="goPrivacy()" class="hintArrow">《隐私政策》</view>
			</view>
			
		
	
							
					
			<!-- 		<button :class="loginButtonClass" @click="loginHandler" hover-class="btn-hover">登录</button>
					
					<button :class="loginButtonClass" @click="loginHandler" hover-class="btn-hover">登录</button>
					
						
					
					
					<view class="login-other flc">
						<view class="fz12 item" @click="selectLoginType">验证码登录</view>
					
					</view> -->
				
			</view>
			
	
			<view class="btttonView" @click="loginHandler">立即登录
		
				<!-- <view class="loginView" @click="loginHandler">注册</view> -->
			</view>
			
	<!-- src="../../../static/image/logobuttonjianbian.png" -->
							
						
			<!-- 	<view class="btttonView" style="margin-top: 60upx;" v-if="isMemberWeb==false">
					<view class="registButton" @click="toReg">注册</view>
					
				</view> -->
			
			<view class="viewboxxxxx">
				
				<view class="registButton" @click="toReg">账号注册</view>
				
				<view class="registButton" style="margin-right: 0upx;margin-top:4upx" >|</view>
					
				<view class="goforgetpwd" @click="goForgetpwd()">忘记密码?</view>
					
					
				
			</view>
			
	
				
		
			<!--  微信浏览器里 -->
			<!-- #ifdef H5 -->
			<template v-if="weixinBrowser">
				<view class="thirdLogoView">其他方式登录</view>
				<view class="flc third-block">
					<view class="third-item" v-for="(item, key, index) in thirdPartyLogins" :key="index" @click="handleThirdLogin(item)">
						<image class="third-item-img" :src="getThirdLoginImg(key)" mode="widthFix"></image>
					</view>
				</view>
			</template>
			<!-- #endif -->
			
			
			
			
			
			
			<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
		<!-- 	<view class="fz12 g5">第三方账号登录：</view>
			<view class="flc third-block" v-if="thirdPartyLogins.length > 0">
				<view class="third-item" v-for="(item, key, index) in thirdPartyLogins" :key="key" @click="handleThirdLoginApp(item)">
					<image class="third-item-img" src="/static/image/ic-wechat.png" mode="aspectFill" v-if="item == 'weixin'"></image>
				</view>
			</view> -->
			<!-- #endif -->
	
	
	<!-- <view style="width: 100%;">{{loginHint}}</view> -->
			
			<!-- /proImages/loginImages/userLoginBg.jpg -->
		</view>
</template>

<script>
	import {
		baseUrl,
		isMemberWeb
	} from '@/config/config.js';
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				maxMobile: 11,
				isMemberWeb : isMemberWeb,
				mobile: '', // 手机号
				pwd: '', // 密码
				isCaptcha: false, // 是否需要验证码
				captcha: '', // 输入的验证码
				captchaUrl: '', // 验证码图片地址
				btnb: 'btn btn-square btn-c btn-all', // 按钮bg
				weixinBrowser: false, // 是否是微信浏览器
				thirdPartyLogins: [] ,// 第三方登录列表
				loginHint : '',
			};
		},
		onLoad(options) {
			if (options.invitecode) {
				this.$db.set('invitecode', options.invitecode);
			}
			// 判断浏览器环境
			this.weixinBrowser = this.$common.isWeiXinBrowser();

			if (this.weixinBrowser) {
				this.getAuths();
			}
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			this.getAppAuths();
			// #endif
		},
		onShow() {
			if (this.$db.get('userToken')) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		computed: {
			// 动态更改登录按钮bg
			loginButtonClass() {
				return this.mobile && this.mobile.length > 0 && this.pwd ? this.btnb + ' btn-b' : this.btnb;
			},
			logoImage() {
				return this.$store.state.config.shop_logo;
			},
			getThirdLoginImg(key) {
				return key => {
					if (key == 'Wxofficial') {
						return '/static/image/ic-wechat.png';
					} else if (key == 'weixin') {
						return '/static/image/ic-wechat.png';
					}
				};
			}
		},
		methods: {
			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else if (!this.pwd) {
					res.status = false;
					res.msg = '请输入密码';
				} else {
					res.status = true;
				}
				return res;
			},
			
			
			// 登录处理
			loginHandler() {
				

				if (this.mobile && this.mobile.length > 0 && this.pwd) {
					
				
					this.toLogin();
					
					
					// if (!this.rightMobile().status) {
					// 	this.$common.errorToShow(this.rightMobile().msg);
					// } else {
					// 	this.toLogin();
					// }
				}
			},
			// 获取验证码图片地址
			getCaptchaUrl() {
				this.captchaUrl = this.$config.apiBaseUrl + 'captcha.html';
				console.log(this.captchaUrl);
			},
			getCodeImg() {
				let num = Math.ceil(Math.random() * 1000);
				this.captchaUrl = this.$config.apiBaseUrl + 'captcha.html?' + num;
				console.log(this.captchaUrl);
			},
			// 去注册
			toReg() {
				
				
				
				// this.$common.redirectTo('/pages/login/login/mobile?user_wx_id=1');
				
				
				
				
				this.$common.redirectTo('/pages/login/register/index');
			},
			// 去登录
			toLogin() {
				let data = {
					username: this.mobile,
					password: this.pwd
				};

				if (this.isCaptcha) {
					data.captcha = this.captcha;
				}

				// 获取邀请码
				let invicode = this.$db.get('invitecode');
				if (invicode) {
					data.invitecode = invicode;
				}

				this.$api.login(data, res => {
					
					// console.log(res);
			
					
					if (res.status) {
						this.$db.set('userToken', res.data);
						this.redirectHandler();
					} else {
						this.$common.errorToShow(res.msg, () => {
							// 绑定手机号
							if (res.data === '11027') {
								this.$db.set('userToken', res.token);
								this.$common.navigateTo("/pages/login/mobile/index")
							}
							// 需要输入验证码 或者 验证码错误刷新
							if (res.data === 10013 || res.data === 10012) {
								this.isCaptcha = true;
							}

							// 登录需要验证码
							if (this.isCaptcha) {
								this.getCaptchaUrl();
							}

						});
					}
				});
			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.$db.del('invitecode');
				// this.handleBack();
				// let pages = getCurrentPages()
				// let page = pages[pages.length - 1]
				// console.log(page);
				// if (page.route.indexOf("pages/login/login/index1") !== -1) {
				// 	uni.navigateBack({
				// 		delta: 2
				// 	});
				// } else {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// }
				uni.navigateBack({
					delta: 1
				});
			},
			// 登录方式切换
			selectLoginType() {
				this.$common.redirectTo('/pages/login/login/index');
			},
			// 获取第三方登录列表
			getAuths() {
				let data = {
					url: baseUrl + 'wap/pages/author'
				};
				
				// this.loginHint = data;
				
				this.$api.getTrustLogin(data, res => {
					if (res.status) {
						
						
						
						this.thirdPartyLogins = res.data;
					}
				});
			},
			// 第三方登录授权
			handleThirdLogin(url) {
				this.$common.redirectTo('');
				
				this.loginHint = url;
				
				
				
				let redirect = this.$store.state.redirectPage;
				
			
				
				// console.log("第三方登录vuex"+redirect);
				this.$db.set('redirectPage', redirect);
				
				
				
				
				
				// console.log("第三方登录本地存储"+this.$db.get('redirectPage'));
				// window.location.href = 'www.baidu.com';
				
				
			window.location.href = url;
				
			},
			//获取APP信任登录
			getAppAuths() {
				let _this = this;
				_this.thirdPartyLogins = [];
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (res.errMsg == 'getProvider:ok') {
							_this.thirdPartyLogins = res.provider;
						}
					}
				});
			},
			//app第三方登录
			handleThirdLoginApp(type) {
				uni.showLoading({
					title: '加载中'
				});
				
		
				
				let _this = this;
				uni.login({
					provider: type,
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: type,
							success: function(infoRes) {
								if (infoRes.errMsg == 'getUserInfo:ok') {
									var data = {
										user: infoRes.userInfo,
										type: type
									};
									var invitecode = _this.$db.get('invitecode');
									if (invitecode) {
										data.invitecode = invitecode;
									}
									_this.$api.appTrustLogin(data, res => {
										uni.hideLoading();
										if (res.status) {
											
											
											
									
											
											
											//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
											if (typeof res.data.token == 'undefined') {
												uni.redirectTo({
													url: '/pages/login/login/index?user_wx_id=' + res.data.user_wx_id
												});
											} else {
												//登陆成功，设置token，并返回上一页
												_this.$db.set('userToken', res.data.token);
												uni.navigateBack({
													delta: 1
												});
												return false;
											}
										} else {
											_this.$common.errorToShow('登录失败，请重试');
										}
									});
								} else {
									uni.hideLoading();
									_this.$common.errorToShow('登录失败，请重试');
								}
							}
						});
					}
				});
			},
			// 跳转到用户协议
			goAgreement() {
				let articleId = this.$store.state.config.user_agreement_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			// 跳转到隐私政策
			goPrivacy() {
				let articleId = this.$store.state.config.privacy_policy_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			goForgetpwd() {
				this.$common.navigateTo('/pages/login/forget/forget');
			}
		}
	};
</script>

<style lang="scss">


	page{
		background-color:  #F6F6F6;
		
	}
	.content {

		background-color:  #EDEDED;
		
		
		display: flex;
		
		flex-direction: column;
		
		// justify-content: space-between;
		
		align-items: center;
		
	
		
		// padding: 0upx 100upx;
	}
	
	
	.logoImage{
		
		width: 141upx;
		
		height: 141upx;
		
		// margin-left: 36upx;
		
		margin-top: 89upx;
		
		
		// background-color: #00BFFF;
		
		
		
	}

	.login-t {
		// text-align: center;
		// line-height: 300upx;
		font-size: 60upx;
		// height: 300upx;
		color: #FF5A5F;
		
		margin-top: 21upx;
		
		// margin-left: 36upx;
		// font
		font-weight: bold;
		// padding: 50upx 0;
	}

	.loginButtonStyleView{
		
		margin-top: 36upx;
		
		width: 678upx;
		
		height: 114upx;
		
		// margin-left: 36upx;
		
		border-radius: 5upx;
		
		background-color: #FFFFFF;
		
	
		// box-shadow: 0upx 4upx 0upx 0upx rgba(255, 0, 0, 1);
		
		
		// box-shadow: 0upx 2upx 0upx 0upx rgba(0, 0, 0, 1);
		
		// box-shadow: 0upx 1upx 1upx 0upx rgba(166, 166, 166, 40);
		// box-shadow: 0upx 6upx 0upx 0upx rgba(255, 0, 0, 1);
		
		// box-shadow-x:;
		
		display: flex;
			
		flex-direction: row;
		
		align-items: center;
		
		
		
		// box-shadow:   0px 2upx 4upx rgba(0,0,0,0.03),  0upx 4upx 8upx rgba(0,0,0,0.03),0upx 6upx 14upx rgba(0,0,0,0.06);    
		
		
	}


	.inputView{
		
		margin-left: 30upx;
		
		height: 100%;
		
		color: #3A3A3A;
		
		font-size: 30upx;
		
	}
	
	.inputpalceView{
		
		font-size: 30upx;
			
		color: #8AA3B9;
		
	}





	.codeimg {
		width: 210rpx;
		margin-right: 30upx;
	}

	
	
	.goforgetpwd {
		

		
		
		text-align: center;
		
			
		
		margin-left: 20upx;
		
		font-size: 28upx;
		
		color: #3A3A3A;
		
	}


	.agreement {
		// margin: 20rpx 0;
	
	
		margin-top: 36upx;
		
		// 8AA3B9
		
		font-size: 24upx;
		// background-color: ;
		color: #3A3A3A;

		// background-color: #007AFF;
		
		display: flex;
		
		flex-direction: row;
		
		
		// text-align: center;
		
		justify-content: center;
		
	}


	.hintArrow {
		
		font-size: 24upx;
		
		color: #FF5A5F;
	}

	
	.btttonView{
		
		margin-top: 81upx;
		

		text-align: center;
		
		width: 678upx;
		
		height: 90upx;
		
		// margin-left: 36upx;
		
		font-size: 36upx;
		
		color: #FFFFFF;
		
		line-height: 90upx;
		
		// border-radius: 45upx;
		
		
		background-color: #FF5A5F;
		
		
		box-shadow:   0px 3upx 7upx rgba(0,0,0,0.06),  0upx 2upx 4upx rgba(0,0,0,0.03),0upx 1upx 2upx rgba(0,0,0,0.03);
		
		
	

	}
	

	
	.registButton{
		
	
		
	
		
		
		text-align: center;
		
	
		
		margin-right: 20upx;
		
		font-size: 28upx;
		
		color: #3A3A3A;
		
	
		
		
		// background-color: #5565FB;
		
	}


	.thirdLogoView{
		
		margin-top: 61upx;
		
		
		text-align: center;
		
		width: 678upx;
		
		height: 90upx;
		
		// margin-left: 36upx;
		
		font-size: 28upx;
		
		color: #3A3A3A;
		
		line-height: 90upx;
		
		border-radius: 45upx;
		
		
	}


.viewboxxxxx{
	
	margin-top: 36upx;
	
	width: 100%;
	
	height: 40upx;
	
	// background-color: #007AFF;
	
	display: flex;
	
	flex-direction: row;
	
	justify-content: center;
	
	
	
}

	.third-block {
		justify-content: center;
		// padding-top: 40upx;
		
		
		padding-bottom: 40upx;
		


		.third-item {
			width: 80upx;
			height: 80upx;
			// background: $g2;
			// border-radius: 50%;
			// padding: 16upx;
			
					// background-color: #007AFF;

			&-img {
				display: block;
				width: 80upx;
				// height: 100%;
			}
		}
	}

	
</style>
